本讲我们将探讨 Nuxt 项目的打包与部署,涉及内容如下:
- 多种打包方式;
- 部署为 Node.js 服务;
- 部署为静态服务;
- 云服务。
# 多种打包方式
与传统服务端渲染只能发布于 Node.js 服务不同,Nuxt 应用不仅可以发布在 Node.js 服务上,还能预渲染内容做为静态服务,Nuxt3 甚至可以发布在 serverless 或 cdn 等云服务环境。
打包 Nuxt 项目可以用nuxt build或nuxt generate,根据配置不同,可分为以下几种方式:
- SSR:
nuxt build。代码会被打包到.output目录,打包产物分为 public 和 server 两部分。入口为 index.mjs,可以使用 node 或 pm2 等进程管理工具启动服务,也可以配合nuxt preview启动预览服务。 - SPA:
ssr:false+nuxt generate。产物只有 .output/public 中的静态文件,发布 .output/public 即可。但是 SPA 需要在运行时访问接口获取数据,因此仍然需要提供接口服务才能正常显示页面。 - SSG:
nuxt generate。产物只有 .output/public 中的静态文件,发布 .output/public 即可。这种方式会在创建时生成页面内容,因此只需要提供静态服务即可预览。 - 其他服务:
presets,可用于其他非 node 运行时打包,例如 deno,serverless,edge worker 等。产物根据预设不同会有不同,部署需要按照对应的平台进行操作。
# 打包 SSR
默认情况下,直接执行nuxt build:
复制代码yarn build
@前端进阶之旅: 代码已经复制到剪贴板
打包结果如下:server 内会有内容,index.mjs 为入口文件。

# 打包 SSG
默认情况下直接执行 nuxt generate:
复制代码yarn generate
@前端进阶之旅: 代码已经复制到剪贴板
下图为 generate 结果:server是空的,只有 public 中的静态内容。

# 打包 SPA
配置 ssr: false,然后执行 nuxt generate:
arduino
复制代码export default defineNuxtConfig({
ssr: false,
})
复制代码yarn generate
@前端进阶之旅: 代码已经复制到剪贴板
下图为 generate 结果:server是空的,跟 SSG 略有不同,动态的 detail 没有了,会作为前端动态路由出现。

# 使用 presets
配置 nitro.preset选项即可。

例如,我们准备发布到 vercel,可以设置 nitro.preset 为 vercel 或 vercel edge。
# 部署为 Node.js 服务
针对前面介绍的 SSR 方式打包,访问页面需要服务器实时渲染,因此需要启动 node server。
# 启动 node.js 服务
执行如下命令启动服务:
